<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--[if lte IE 9 ]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>生成二维码</title>
<script src="../../js/lib/jquery-1.11.3.min.js"></script>
<script src="../../js/lib/jquery.qrcode.min.js"></script>
<style>
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}body{font-size:14px;margin:0;padding:0;}input[type="button"],input[type="submit"],input[type="reset"]{-webkit-appearance:none;}.big{margin:0 auto;max-width:680px;}.main{margin:48px 10px 0;}.put{text-align:center;}.left{display:block;width:90px;float:left;height:34px;line-height:34px;}.right{width:90px;position:absolute;top:0;right:-90px;padding-left:8px;text-align:left;}.online{position:relative;margin-left:90px;margin-right:90px;height:34px;line-height:34px;}.online input{width:100%;}.put input{height:34px;padding:6px 12px;font-size:14px;color:#555;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);}input:focus{border-color:#398de3;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}input.submit{width:100%;margin-top:30px;background:#398de3;color:#fff;border:1px solid #3582d2;cursor:pointer;}#qrcode{text-align:center;margin-top:50px;}
</style>
<script>
$(function() {
	$(".submit").on("click", OnSubmit);
})

function OnSubmit() {
	var timestamp = Math.round(new Date().getTime()/1000);
	var onlinetime = $("#onlinetime").val();
	var reg = /^[0-9]\d*$/;
	if (!reg.test(onlinetime)) {
		alert("请正确输入分钟数");
		return
	};

	$.post(
		"/get_qrcode?t=" + timestamp + "&o=" + onlinetime,
		function(d) {
			if (d.status == 0 && typeof d.data != "undefined" && d.data.indexOf("http") != -1) {
				$('#qrcode').html("");
				$('#qrcode').qrcode(d.data);
			} else {
				alert("获取失败！" + (d.data ? d.data : ""))
			}
		},
		"json"
	)
}
</script>
</head>

<body>
<div class="big">
	<div class="main">
		<div class="put">
			<label>
				<span class="left">可上网时长</span>
				<div class="online">
					<input type="text" id="onlinetime" value="60" maxlength="6" />
					<span class="right">分钟</span>
				</div>
			</label>
			<input type="button" class="submit" value="生成二维码">
		</div>
		<div id="qrcode"></div>
	</div>
</div>
</body>
</html>
